<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Bookmark Example</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://www.openlayers.org/dev/examples/style.css" type="text/css" />
    <link rel="stylesheet" href="../theme/default/bookmark.css" type="text/css" />
    <style type="text/css">
        body { position: relative; }
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
            position: relative;
        }
        #myBookmarks {
            height: 200px;
            width: 15em;
            float: right;
         }
         #myBookmarks #olBookmarkElement {
            cursor : pointer;
         }
        input[type="button"] { border: 1px solid black; }
    </style>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="../lib/OpenLayers/Control/Bookmark.js"></script>
    <script type="text/javascript">
        var map, bookmarks;
        function initMap(){
            map = new OpenLayers.Map('map', { controls: [], theme: null });
            map.addControl(new OpenLayers.Control.Navigation());

            // outside the map
            bookmarks = new OpenLayers.Control.Bookmark({ 'div':OpenLayers.Util.getElement('myBookmarks'), 'title': 'Bookmarks outside the map' });
            map.addControl(bookmarks);
            bookmarks.add("NASHVILLE",new OpenLayers.Bounds(-87.075,35.956,-86.507,36.425),Msg,"Welcome to Nashville");
            bookmarks.add("JACKSONVILLE","-82.11031,30.07138,-81.27810,30.63443");
            bookmarks.add("WASHINGTON DC",new OpenLayers.Bounds(-77.338126,38.639689,-76.788809,39.189005));
            bookmarks.add("WORLD","-180,-180,180,180");

            OpenLayers.Rico.Corner.round( bookmarks.div , {corners: "tl bl tr br", bgColor: "transparent", color: "darkblue", blend: false});
            OpenLayers.Rico.Corner.changeOpacity(bookmarks.contentDiv, 0.75);

            // inside the map, docked right middle
            bookmarks2 = new OpenLayers.Control.Bookmark({ 'title': 'Bookmarks in the map', 'allowRemove': false });
            map.addControl(bookmarks2);
            bookmarks2.maximizeControl();
            bookmarks2.add("ATLANTA",new OpenLayers.Bounds(-85.085373,33.114328,-83.679123,34.520578));
            bookmarks2.add("BOSTON",new OpenLayers.Bounds(-71.401901,41.989908,-70.698776,42.693033));
            bookmarks2.add("WORLD",new OpenLayers.Bounds(-180,-180,180,180));

            OpenLayers.Rico.Corner.round( bookmarks2.div, {corners: "tl bl", bgColor: "transparent", color: "darkblue", blend: false});
            OpenLayers.Rico.Corner.changeOpacity(bookmarks2.contentDiv, 0.75);

            bookmarks3 = new OpenLayers.Control.Bookmark({ 'map':map });
            bookmarks3.add("ATLANTA","-85.085373,33.114328,-83.679123,34.520578",Msg,"Welcome to Atlanta");
            bookmarks3.add("BOSTON","-71.401901,41.989908,-70.698776,42.693033",Msg,"Welcome to Boston");

            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}, {'displayInLayerSwitcher':false} );

            map.addLayer(ol_wms);
            if (!map.getCenter()) map.zoomToMaxExtent();
        }

        function Msg(val) { alert(val); }
    </script>
  </head>
  <body onload="initMap()">
    <h1 id="title">Bookmark Control Example</h1>
    <div id="tags"></div>
    <p id="shortdesc">
      Demonstrates the use of Bookmarks.<br />
      Styled with CSS only.  Corners rounded by Rico outside of the class.
    </p>
    <div id="myBookmarks"></div>
    <div id="map"></div>
    <div id="docs">
      <p>This demonstrates use of the Bookmarks.<br />Applys to outside bookmarks only.</p>
   </div>
   <div>
      <form>
         Name: <input type="text" id="name" style="width:100px;border: 1px solid black"><br />
         Coords: <input type="text" id="coords" style="width:200px;border: 1px solid black">&nbsp;&nbsp;<input type="button" value="Get Current Coords" onclick="document.getElementById('coords').value = map.getExtent().toBBOX()"><br /><br />
         <input type="button" value="Zoom To" onclick="if(document.getElementById('name').value != ''){ bookmarks.zoomToLabel(document.getElementById('name').value) } else { alert('Need a name and coords') }">&nbsp;&nbsp;
         <input type="button" value="Add" onclick="if(document.getElementById('name').value != '' && document.getElementById('coords').value != ''){ bookmarks.add(document.getElementById('name').value, document.getElementById('coords').value) } else { alert('Need a name and coords') }">&nbsp;&nbsp;
         <input type="button" value="Add Current View" onclick="if(document.getElementById('name').value != ''){ bookmarks.addView(document.getElementById('name').value) } else { alert('Need a name') }">&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="Remove" onclick="if(document.getElementById('name').value != ''){ bookmarks.remove(document.getElementById('name').value) } else { alert('Need a name') }">&nbsp;&nbsp;
         <input type="button" value="Remove All" onclick="bookmarks.clear()"><br /><br />
	 Bookmarks without a DIV?  Click <a noref onclick="javascript:bookmarks3.zoomToLabel(bookmarks3.find('atlanta')[0][1]);" style="text-decoration:underline;cursor:pointer;">here</a> to go to Atlanta or
	 <a noref onclick="javascript:bookmarks3.zoomToLabel(bookmarks3.find('boston')[0][1]);" style="text-decoration:underline;cursor:pointer;">here</a>
         to go to Boston.<br /><br />
         Added the ability to pass a user defined function to be execute when the user clicks the bookmark.  Click the Boston
         or Atlanta links above.
      </form>
   </div>
  </body>
</html>
